<template>
    <!-- 自定义组件的使用 -->
    <div>
        <div class="reactDatalist">
    
            <!-- 组件的复用 -->
            <my-button-2></my-button-2>
            <my-button-2></my-button-2>
            <my-button-2></my-button-2>

        </div>
    </div>
</template>

<script>
// 导入自定义组件
import button2 from './base2/button2.vue'

export default {
    name: "note",

    // 注册自定义组件，并给自定义组件命名
    components: {
        "my-button-2": button2,
    },
    data() {
        return {
        };
    },
    methods: {
    },
};
</script>

<style scoped>
.menuContainer {
    width: 100%;
    height: 60px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.menuItem {
    width: 50%;
    height: 60px;
}

#menuItem {
    position: relative;
    padding-left: 24%;
}

.main {
    width: 100%;
    float: left;
    font-family: NotoSansHans-Light, Arial, Helvetica, sans-serif;
}

.dataList {
    position: relative;
    width: 100%;
    background: #f0f3fa;
}

.reactDatalist {
    position: absolute;
    margin-top: 3%;
    top: 10%;
    left: 50%;
    padding-left: 30px;
    width: 97%;
    min-height: 400px;
    transform: translateX(-50%);
    border-radius: 8px;
    box-shadow: 0px 0px 12px -2px #2a3853;
    overflow: auto;
    background: #fff;
}

.exportBarText {
    width: 300px;
    height: 60px;
    display: inline-block;
    padding-left: 20px;
    color: #94a0b9;
}

.btnContainer {
    width: 100%;
    height: 60px;
    margin-top: 20px;
    font-size: 18px;
    text-indent: 10px;
    letter-spacing: 10px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.btn {
    width: 35%;
    height: 45px;
    font-size: 18px;
    text-indent: 10px;
    letter-spacing: 10px;
}

.box {
    margin-top: 10px;
}

.text-color1 {
    color: red;
}

.text-color2 {
    color: blue;
}
</style>